{{--@dd($model['fields'])--}}
<div class="card" id="app">
    <div class="card-header">
        字段设置
    </div>
    <div class="card-body">
        <div class="card" v-for="(field,index) in fields">
            <div class="card-body">
                <div class="form-group">
                    <input type="text" v-model="field.title" class="form-control" required placeholder="字段中文描述" aria-describedby="helpId">
                </div>
                <div class="form-group">
                    <input type="text" v-model="field.name" class="form-control" required placeholder="字段英文标识" aria-describedby="helpId">
                </div>
                <div class="form-group">
                    <select v-model="field.type" class="form-control">
                        <option v-for="(title,name) in types" :value="name">@{{ title }}</option>
                    </select>
                </div>
            </div>
            <div class="card-footer text-muted">
                <button class="btn btn-white btn-sm" type="button" @click="delField(index)">删除</button>
            </div>
        </div>
        <button class="btn btn-white btn-sm" type="button" @click="addField">添加字段</button>
    </div>
    {{--在整个"字段设置"view视图页面中发现只有下面这个textarea文本域有name,别的都没有name名,而字段设置又包括在一个form表单中,也就是当这个form表单提交的时候只有下面这个隐藏的文本域中的内容才会被form表单提交到后台,而其它的不会,虽然这个文本域看不到但是最终提交的时候起效的却是这个文本域,虽然别的用户能看得到,但是别的的主要目的就是引导用户填写内容,最终这些内容都会保存到下面的文本域中由于vue中数据绑定关联也是使用两个大括号对,所以为了和laravel区分,在两个大括号对外面加一个@符合进行区分--}}
    <textarea name="fields"    cols="30" rows="10">@{{ fields }}</textarea>
    <div class="card-footer text-muted">
        <button class="btn btn-primary btn-sm">保存提交</button>
    </div>
</div>
<script>
        new Vue({
            el: "#app",
            data: {
                fields: {!! old('fields',isset($model)?json_encode($model['fields']):'[]') !!},
                types: {text: '单行文本框', textarea: '多行文本框', ueditor: '编辑器'}
            },
            methods: {
                addField() {
                    this.fields.push({title: '', name: '', type: 'text'})
                },
                delField(index) {
                    this.fields.splice(index, 1)
                }

            }
        })
</script>

